<template>
  <el-dialog
      :before-close="hideDialog"
      :close-on-click-modal="false"
      :visible.sync="cartVisible"
      custom-class="payment-dialog"
      destroy-on-close
      title="收银"
      width="1100px">
    <div class="cart-container">
      <!-- 左侧-购物车列表-展示油品和非油品 -->
      <div class="left">
        <cart-left-search-bar></cart-left-search-bar>
        <cart-left-data-table></cart-left-data-table>
        <cart-left-sum-bar></cart-left-sum-bar>
      </div>
      <!-- 右侧-会员验证、券选择、支付方式、支付金额、找零、特殊操作等 -->
      <div class="right">
        <!-- 会员验证框 -->
        <cart-right-search-bar></cart-right-search-bar>
        <!-- 会员信息框 -->
        <cart-right-member-info></cart-right-member-info>
        <!-- 支付方式区 -->
        <cart-right-function-area></cart-right-function-area>
        <!-- 特殊功能区 -->
      </div>
      <!-- 优惠券选择 -->
      <cart-coupon-dialog></cart-coupon-dialog>
      <!-- 挂单弹窗 -->
      <pending-order-dialog></pending-order-dialog>
    </div>
  </el-dialog>
</template>

<script>
import {mapGetters} from 'vuex'
import CartLeftDataTable from './components/CartLeftDataTable.vue'
import CartLeftSumBar from './components/CartLeftSumBar.vue'
import CartRightSearchBar from './components/CartRightSearchBar.vue'
import CartLeftSearchBar from './components/CartLeftSearchBar.vue'
import CartRightMemberInfo from './components/CartRightMemberInfo.vue'
import CartRightFunctionArea from './components/CartRightFunctionArea.vue'
import CartCouponDialog from './components/CartCouponDialog.vue'
import {unlockFuelRecord} from '@/api/settle'
import PendingOrderDialog from './components/PendingOrderDialog.vue'

export default {
  components: {
    CartLeftSearchBar,
    CartLeftDataTable,
    CartLeftSumBar,
    CartRightSearchBar,
    CartRightMemberInfo,
    CartRightFunctionArea,
    CartCouponDialog,
    PendingOrderDialog
  },
  name: 'CartPaymentDialog',
  data () {
    return {}
  },
  computed: {
    ...mapGetters([
      'cartVisible',
      'stationId',
      'operator',
      'cartList'
    ])
  },
  methods: {
    // 关闭弹窗
    hideDialog () {
      // 解锁油品记录
      this.cartList.filter(item => item.type === 'oil').forEach(item => {
        unlockFuelRecord({id: item.id, stationId: this.stationId, operator: this.operator})
      })
      this.$store.dispatch('hideCartDialog')
      this.$bus.$off('autoSelectCoupons')
    }
  }
}
</script>

<style scoped>
.cart-container {
  width: 100%;
  height: 620px;
  display: flex;
  background: whitesmoke;
}

.cart-container .left {
  width: 0;
  flex-grow: 1;
  display: flex;
  justify-content: start;
  flex-direction: column;
  padding: 10px;
}

.cart-container .right {
  width: 0;
  flex-grow: 1;
  display: flex;
  justify-content: start;
  flex-direction: column;
  padding: 10px;
}
</style>
<style>
.payment-dialog .el-dialog__body {
  padding: 0px !important;
}

.payment-dialog .el-form-item {
  margin-bottom: 10px;
}

.el-dialog__header {
  background: #409EFF;
}

.el-dialog__title {
  color: white !important;
}

.el-dialog__headerbtn .el-dialog__close {
  color: white !important;
}

.el-dialog__body {
  padding: 10px !important;
}

.cart-container .el-card__header {
  text-align: left;
  padding: 5px 10px !important;
  background: whitesmoke;
}

.el-card__body {
  padding: 15px !important;
}

.el-card {
  margin-bottom: 10px;
}
</style>
